<template>
  <div>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 100%;height:400px;"></div>
  </div>
</template>
<script>
// 导入echarts
import * as Echarts from 'echarts'
// import _ from 'lodash'
export default {
  data() {
    return {
      // 需要合并的数据
      options: {
        title: {
          text: '用户来源'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#E9EEF3'
            }
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            boundaryGap: false
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ]
      }
    }
  },
  created() {},
  // 此时页面上的元素已经被渲染完毕了
  methods: {
    // 小数点后保留两位的函数
    towNumber(val) {
      return Number(val).toFixed(2)
    },
    getCurrentTime() {
      // 获取当前时间并打印
      const yy = new Date().getFullYear()
      const mm = new Date().getMonth() + 1
      const dd = new Date().getDate()
      this.$store.state.todayTime = yy + '-' + mm + '-' + dd
      console.log(this.$store.state.todayTime)
    },
    flashMyChart() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = Echarts.init(document.getElementById('main'))
      // 获取数据
      // ----------
      // 准备数据和配置项
      // 合并
      // const result = _.merge(res.data,this.options)
      this.getCurrentTime()
      this.$store.state.dataTime = []
      this.$store.state.dataNet = []
      this.$store.state.dataTime.push(
        ...this.$store.state.TIME,
        this.$store.state.todayTime
      )
      this.$store.state.dataNet.push(
        ...this.$store.state.NET,
        this.towNumber(this.$store.state.todayNet)
      )
      var option = {
        tooltip: {},
        legend: {
          data: ['账户净值(万)']
        },
        xAxis: {
          data: this.$store.state.dataTime
        },
        yAxis: {
          axisLabel: {
            margin: 5,
            formatter: function(value) {
              value = value / 10000
              return value
            }
          },
          min: Math.min(...this.$store.state.dataNet),
          max: this.towNumber(Math.max(...this.$store.state.dataNet))
        },
        series: [
          {
            name: '账户净值(万)',
            type: 'line',
            data: this.$store.state.dataNet
          }
        ]
      }
      // 展示数据
      myChart.setOption(option)
    }
  },
  mounted() {
    this.flashMyChart()
  },
  watch: {
    data: function() {
      var _this = this_this.$nextTick(function() {
        _this.flashMyChart()
      })
    }
  }
}
</script>
